@import '../../../../variables';
@import './task.component.mixins';

// TASK BOX STYLES
// ---------------
// NOTE: needs to come first to be overwritten by :host.isCurrent
// NOTE: needs to be very light, because we're on a lighter background for the dark theme
:host-context(.isDarkTheme) {
  color: $task-text-c-dark;
}

:host-context(.isDarkTheme).isSelected,
:host-context(.isDarkTheme).isCurrent {
  color: $dark-theme-text-color-most-intense;
}

:host {
  display: block;
  position: relative;

  color: $light-theme-text-color;

  &.isSelected {
    z-index: $z-is-selected-host;
    //position: sticky;
    //top: 16px;
  }

  &.isCurrent {
    z-index: $z-is-current-host;
    position: sticky;
    top: $s;
  }

  &:focus {
    z-index: $z-focus-host;
    outline: none;
  }
}

.inner-wrapper {
  position: relative;
  // NOTE: -1 px because we move the box slightly up
  padding: #{$task-inner-padding-top-bottom - 1} 0 $task-inner-padding-top-bottom;
  margin-bottom: 0;
}

//::ng-deep task .box {
//  background: red !important;
//}

.box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  top: 1px;
  transition: $transition-standard;
  transition-property: transform, box-shadow;
  border: 1px solid transparent;

  @include lightTheme {
    background: $task-c-bg-light;
  }

  @include darkTheme {
    background: $task-c-bg-dark;
  }

  :host.gu-mirror & {
    box-shadow: $whiteframe-shadow-8dp !important;
    border-radius: $task-border-radius !important;
  }

  :host-context(.isDarkTheme).gu-mirror & {
    background: $task-c-drag-drop-bg-dark !important;
  }

  // NOTE: also applies to child tasks
  :host-context(.isLightTheme).isSelected.isSelected & {
    background: $task-c-selected-bg-light;
  }

  :host-context(.isDarkTheme).isDone & {
    background: $task-c-bg-done-dark;
  }

  :host-context(.isDarkTheme).isSelected.isSelected & {
    background: $task-c-selected-bg-dark;
  }

  :host.isSelected.isSelected > .inner-wrapper > & {
    transition: $transition-enter;
    transition-property: left, right, box-shadow;
    box-shadow: $task-selected-shadow-light;
    // because of the shadow, this looks better
    //bottom: 2px;

    @include darkTheme {
      box-shadow: $task-selected-shadow-dark;
    }

    @include mq(xs) {
      transform-origin: left;
      left: -1 * $task-border-radius;
      border-top-left-radius: $task-border-radius;
      border-bottom-left-radius: $task-border-radius;
    }

    @at-root :host-context(.isDarkTheme).isSelected.isSelected.isSelected
        .sub-tasks
        ::ng-deep
        .box {
      background: $sub-task-c-bg-dark-in-selected;
    }
  }

  :host:focus > .inner-wrapper > & {
    border-radius: $task-border-radius;
    // we don't want focus borders for touch only devices
    @include noTouchOnly() {
      border-color: $task-c-focus;
      border-width: 1px;
      border-style: solid !important;
    }
  }

  :host:focus.mobile-highlight > .inner-wrapper > & {
    border-color: $task-c-focus;
    border-width: 1px;
    border-style: solid !important;
  }

  :host.isCurrent.isCurrent.isCurrent.isCurrent.isCurrent & {
    border-radius: $task-border-radius;
    box-shadow: $task-current-shadow-light;
    // because of the shadow, this looks better
    //bottom: 2px;

    @include mq(xs) {
      //transform: scale($task-current-task-zoom);
      left: -1 * ($task-border-radius);
      right: -1 * ($task-border-radius);
    }
  }

  :host.isSelected.isSelected > .inner-wrapper > &,
  :host.isSelected.isCurrent.isCurrent.isCurrent.isCurrent & {
    @include mq(xs) {
      right: -34px;
    }
    @include mq(md) {
      right: -234px;
    }
    @include mq(xl) {
      right: -1 * ($task-border-radius);
    }
  }

  :host-context(.isLightTheme).isCurrent.isCurrent.isCurrent.isCurrent & {
    border-color: $task-c-current !important;
    border-width: 1px !important;
    border-style: dashed;
  }

  :host-context(.isDarkTheme).isCurrent.isCurrent.isCurrent.isCurrent & {
    background: $task-c-current-bg-dark;
    box-shadow: $task-current-shadow-dark;
  }

  :host:first-child > .inner-wrapper > & {
    border-top-left-radius: $task-border-radius;
    border-top-right-radius: $task-border-radius;
  }

  :host:last-child > .inner-wrapper > & {
    border-bottom-left-radius: $task-border-radius;
    border-bottom-right-radius: $task-border-radius;
  }
}

.sub-tasks {
  margin: $s $s $s $s * 3;
  position: relative;

  @include smallMainContainer {
    margin: $s $s $s $s * 3;
    position: relative;
  }

  @include mq(xs) {
    //margin: $s $s*2 $s $s*3;
    margin: $s $s $s $s * 5;
  }

  ::ng-deep .box {
    @include lightTheme {
      border-color: $light-theme-extra-border-color;
      bottom: 0;
      top: -1px;
    }

    @include darkTheme {
      box-shadow: $whiteframe-shadow-1dp;
      background: $sub-task-c-bg-dark;
    }
  }
}

:host-context(.isDarkTheme) ::ng-deep .isDone.isDone .box {
  background: $sub-task-c-bg-dark-done;
}

.first-line {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  justify-content: space-between;
  min-height: $task-first-line-min-height;
  touch-action: pan-y;

  @include mq(xs, max) {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  //@include smallMainContainer{
  //  flex-wrap: wrap;
  //  justify-content: flex-end;
  //}
}

.title-and-left-btns-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 70%;
  // we cannot do this since this cuts of the box shadow of the task edit
  //overflow: hidden;

  @include mq(xs, max) {
    //margin-bottom: 5px;
    //flex-shrink: 0;
    flex-basis: 50%;
  }

  @include isDoneForFirstLine {
    opacity: $task-is-done-dim-opacity;
  }
}

// CONTROLS
// --------
.all-controls-wrapper {
  display: flex;
  flex-flow: row;
  position: relative;
  margin-left: $s;
  margin-right: $s;
  align-items: stretch;

  @include verySmallMainContainer {
    flex-direction: column-reverse;
    align-items: flex-end;
    justify-content: center;
  }
}

.controls {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  text-align: right;
  margin-right: 2px;
  position: relative;

  button {
    margin-top: auto;
    margin-bottom: auto;
    height: 100% !important;
    border-radius: $card-border-radius;

    ::ng-deep {
      .mat-mdc-button-persistent-ripple {
        border-radius: $card-border-radius;
      }
    }

    &:hover {
      //@include darkTheme() {
      //  background: rgba(255, 255, 255, 0.1);
      //}
      //@include lightTheme() {
      //  background: rgba(0, 0, 0, 0.05);
      //}
    }
  }

  @include mq(xs, max) {
    white-space: normal;
    margin-left: 5px;
  }

  @include smallMainContainer {
    white-space: normal;
    margin-left: 5px;
  }

  @include verySmallMainContainer {
    min-height: 40px;
  }
}

// OTHER UI ELEMENTS
// -----------------
.title-and-tags-wrapper {
  flex-grow: 1;
  flex-shrink: 1;
  // we cannot do this since this cuts of the box shadow of the task edit
  //overflow: hidden;

  > * {
    @include touchOnlyDevice {
      pointer-events: none;
    }
  }
}

// TASK TITLE
.task-title.task-title {
  @include taskTitle;
}

@mixin timeWrapperMinimalStyles() {
  &:after {
    content: '';
    border-top: 1px solid;
    opacity: 0.1;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
  }

  .time {
    font-size: 13px;
    flex-direction: column;
  }

  .separator {
    display: none;
  }
}

// TIME
.time-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  margin-right: $s;
  z-index: $z-time-wrapper;
  // note: fixes styles for empty time for very small mobile
  min-width: 25px;

  @include mq(xxs) {
    min-width: 0;
  }

  &.isEditable {
    cursor: pointer;

    &:hover {
      .time {
        transition: $transition-standard;
        opacity: 1 !important;
      }
    }
  }

  &.hasNoTimeSpentOrEstimate {
    display: none;
  }

  .time {
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    font-weight: 300;

    @include mq(xs) {
      opacity: 0.5;
      flex-direction: row;
    }
  }

  .time-val,
  .separator {
    display: block;
    white-space: nowrap;
  }

  .time-val {
    mat-icon {
      display: inline-flex;
      vertical-align: middle;
      height: 16px;
      margin-right: 2px;
      margin-top: -2px;

      @include mq(xs, max) {
        margin-right: 2px;
        height: 14px;
      }
    }

    span:not(:last-child) {
      margin-right: 2px;
    }
  }

  .separator {
    padding: 0 $s * 0.5;
  }

  @include smallMainContainer {
    @include timeWrapperMinimalStyles;
  }

  @include mq(xs, max) {
    @at-root .time-wrapper {
      @include timeWrapperMinimalStyles;

      @include isDoneForFirstLine {
        opacity: $task-is-done-dim-opacity + 0.1;
      }
    }
  }

  @include verySmallMainContainer {
    flex-direction: row;
    &:after {
      display: none;
    }
    .time {
      flex-direction: row;
    }
    .separator {
      display: block;
    }
  }
}

.additional-info {
  display: block;
  // required as sort of a clearfix (fixes padding issue)
  overflow: hidden;
}

.drag-over-msg {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 1;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
  z-index: $z-drag-over-msg;
}

.check-done {
  opacity: 0.5;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  z-index: $z-check-done;
  transform: translate(-50%, -50%);
  transition: $transition-standard;
  border-radius: 50%;

  &:hover {
    opacity: 1 !important;
  }

  mat-icon {
    $task-size: 40px;
    font-size: $task-size;
    height: $task-size;
    width: $task-size;
    line-height: $task-size;

    &.undo {
      display: none;
    }
  }

  &:hover {
    mat-icon {
      animation: $transition-duration-m success-btn-ani linear;
    }

    .check {
      display: none;
    }

    .undo {
      display: block;
    }
  }
}

// SWIPE BLOCKS
.block-left,
.block-right {
  pointer-events: none;
  color: $c-contrast;
  position: absolute;
  bottom: 2px;
  top: 1px;
  width: 0;
  z-index: $z-swipe-block;
  transition: $transition-standard;
  border-radius: $task-border-radius;
  overflow: hidden;

  &.isActive {
    background-color: $c-accent;
  }

  mat-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleX(1);
  }
}

.block-left {
  left: 0;
}

.block-right {
  right: 0;
}

progress-bar {
  z-index: $z-progress-bar;
}

// BUTTON STYLES AND DRAG HANDLE
// -----------------------------
.toggle-sub-tasks-btn,
.first-line ::ng-deep .ico-btn,
.first-line .ico-btn {
  $task-button-spacer: 1px;
  margin: 0 $task-button-spacer;
  padding: 0;
  z-index: $z-btn;
  @extend %standardTaskOpacityChange;

  &:hover {
    z-index: $z-btn-hover;
  }

  &:focus {
    outline: none;
  }
}

.first-line .menu-trigger {
  @include mq(xs) {
    opacity: 0;
  }
}

.first-line:hover .menu-trigger {
  @include standardTaskOpacityChange;
}

.delete-btn {
  mat-icon.delete-icon {
    color: $c-warn !important;
  }
}

.drag-handle {
  margin-left: $s;
  margin-right: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  z-index: $z-drag-handle;
  //display: flex;
  //justify-content: center;
  //align-items: center;
  position: relative;

  // fixes drag and drop on mobile
  touch-action: none;
  pointer-events: all;

  @include grabCursor();

  > * {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .type-ico-wrapper {
    width: 40px;
    height: 40px;
    min-width: 40px;
    opacity: $task-icon-default-opacity;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;

    @include mq(xs, max) {
      display: none;
    }

    :host.isCurrent &::ng-deep mat-icon {
      transform: scale(1.4) !important;
      transform-origin: center center;
      opacity: 0.18;
    }
  }

  .drag-handle-ico {
    @include mq(xs) {
      opacity: 0.15;
      //.first-line:hover & {
      //opacity: 0.3;
      //}
    }

    :host.isCurrent & {
      opacity: 0;
    }
  }

  &:active {
    cursor: grabbing;
  }

  // hit area
  &:after {
    content: '';
    position: absolute;
    top: -$s * 0.25;
    bottom: -$s * 0.25;
    left: -$s * 0.25;
    right: -$s * 0.25;

    @include mq(xs) {
      top: -$s * 1;
      bottom: -$s * 1;
      left: -$s * 1;
      right: -$s * 0.5;
    }
  }
}

$this-play-size: 22px;
//
.play-icon-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: $c-accent;

  height: $this-play-size;
  margin-top: 1px;
  width: $this-play-size;
  font-size: $this-play-size;
  line-height: $this-play-size;
  opacity: 1 !important;
  z-index: 3;
  pointer-events: none;

  @include mq(xs) {
    margin-top: 0;
    //left: 10px;
  }

  //.first-line:hover & {
  //  display: none;
  //}
}

.ico-btn {
  color: inherit;

  &.mat-accent {
    color: $c-accent;
  }
}

.toggle-sub-tasks-btn,
.first-line .ico-btn {
  $task-button-spacer: 1px;
  margin: auto $task-button-spacer;
  padding: 0;
  z-index: $z-btn;

  @extend %standardTaskOpacityChange;

  &:hover {
    z-index: $z-btn-hover;
  }

  &:focus {
    outline: none;
  }
}

.toggle-sub-tasks-btn.toggle-sub-tasks-btn {
  position: absolute !important;
  // overwrite any lower values set elsewhere
  opacity: 1;
  transform: translateY(-50%);
  left: -24px;
  top: 50%;
  z-index: $z-toggle-sub-task-btn !important;
  min-width: 0;
  min-height: 0;
  width: 32px !important;
  height: 32px !important;
  margin-top: -1px !important;
  transform-origin: left top;
  transition-property: all;
  box-shadow: $whiteframe-shadow-1dp;

  :host-context(.isNoTouchOnly) & {
    //opacity: 0;
  }

  :host:hover & {
    opacity: 1;
  }

  mat-icon {
    transition: $transition-standard;
    opacity: $task-icon-default-opacity;

    &.isHideDoneTasks {
      transform: rotate(-45deg);
    }
  }
}

.attachment-btn,
.show-additional-info-btn {
  mat-icon {
    transition: transform $transition-standard;
  }
}

.updated-icon {
  position: absolute;
  transform: scale(1.5) translate(-50%, -50%);
  transform-origin: top left;
  top: 50%;
  left: 50%;
}

.start-task-btn {
  :host-context(.isHidePlayBtn) & {
    display: none !important;
  }
}

// ANIMATIONS ETC
// --------------
@keyframes success-btn-ani {
  0% {
    transform: scale(0.5) rotate(-180deg);
  }
  50% {
    transform: scale(1) rotate(-90deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.isPreventPointerEventsWhilePanning {
  * {
    user-select: none !important;
    -webkit-user-select: none !important; /* Safari */
    pointer-events: none !important;
    transition: none !important;
  }
}

$min-badge-size: $s * 2.25;

.mini-badge {
  line-height: $min-badge-size;
  width: $min-badge-size;
  height: $min-badge-size;
  font-size: 12px;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  text-align: center;
}

.parent-title {
  display: flex;
  align-items: center;
  padding-left: $s;
  padding-top: $s * 0.5;
  margin-bottom: -2px;

  .title {
    font-size: 12px;
    text-overflow: ellipsis;
  }
}

.schedule-btn {
  position: relative;
}

.repeat-date-badge,
.time-badge {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  margin-top: 10px;
  font-size: 13px;
  z-index: 10;
  line-height: 1;
  text-align: center;
  padding: 1px 2px 0;
  border: 1px solid $light-theme-extra-border-color;
  background: #fff;
  border-radius: $card-border-radius;

  // avoid affecting drag handle
  pointer-events: none;

  @include darkTheme() {
    border-color: $dark-theme-extra-border-color;
    background: $dark-theme-bg-lighter;
  }
}

@media (min-width: $layout-sm) and (max-width: #{-1 + $layout-xl }) {
  .closeBtn {
    min-width: 40px;
    margin-right: -29px !important;
  }
}
